<template>
	<view class="page-mobile" :style="deviceWidth ? { width: deviceWidth + 'px' } : ''">
		<view class="tabbox" style="position: absolute; top: 60px; left: 50%;
  transform: translateX(-50%);
 z-index: 100000;" :style="deviceWidth2 ? { width: deviceWidth2 + 'px' } : { width: deviceWidth2 + 'px' } ">
			<view class="navbar">
				<view class="nav-center">挑码助手</view>
				<view class="nav-right"></view>
			</view>

		</view>
		<view class="picker-box"
			:style="deviceWidth2 ? { width: deviceWidth2 + 'px' } : { width: deviceWidth2 + 'px' } ">
			<view class="sticky-header"
				:style="deviceWidth2 ? { width: deviceWidth2 + 'px' } : { width: deviceWidth2 + 'px' } "
				style="margin-top: 60px;">
				<view class="picker-content">
					<view class="picker-content-inner">
						<view class="picker-item" v-for="(item,index) in balls" :key="index"
							:style="judgingStyle(item.wave)" v-if="item.show">
							{{item.opencode}}
						</view>
					</view>
				</view>
				<view style="height: 10px;"></view>
				<view class="picker-opt">
					<view class="picker-opt-clear" @click="()=>{
					line1leftcheck=''
					line1rightcheck=''
					line2check=[]
					line3check=[]
					line4check=[]
					line5check=[]
					line6check=[]
					line7check=[]
					line8check=[]
				}">清空</view>
					<!-- getHeight() -->
					<view class="picker-opt-copy" @click="copy">{{copyText}}</view>
				</view>
			</view>

			<view :style="{ height: stickyHeaderHeight + 'px' }"></view>
			<view>
				<view class="picker-rule">
					<view v-for="item of line1lefts" :key="item"
						:class="line1leftcheck==item?'picker-rule-item-active':'picker-rule-item'" @click="()=>{
						if(line1leftcheck==item){
							line1leftcheck=''
						}else{
							line1leftcheck=item
						}
					}">{{item}}</view>
					<view class="picker-rule-item" style="border: none;"></view>
					<view class="picker-rule-item" style="border: none;"></view>
					<view v-for="item of line1rights" :key="item"
						:class="line1rightcheck==item?'picker-rule-item-active':'picker-rule-item'" @click="()=>{
						if(line1rightcheck==item){
							line1rightcheck=''
						}else{
							line1rightcheck=item
						}
					}">{{item}}</view>
				</view>
				<view class="picker-line"></view>
			</view>
			<view>
				<view class="picker-rule">
					<view v-for="item of line2s.slice(0, 5)" :key="item"
						:class="line2check.includes(item)?'picker-rule-item-active':'picker-rule-item'"
						@click="chose('line2',item)">{{item}}</view>
					<view class="picker-rule-item" style="border: none;"></view>
					<view v-for="item of line2s.slice(5)" :key="item"
						:class="line2check.includes(item)?'picker-rule-item-active':'picker-rule-item'"
						@click="chose('line2',item)">{{item}}</view>
				</view>
				<view class="picker-line"></view>
			</view>
			<view>
				<view class="picker-rule">
					<view v-for="item of line3s" :key="item"
						:class="line3check.includes(item)?'picker-rule-item-active':'picker-rule-item'"
						@click="chose('line3',item)">{{item}}</view>
				</view>
				<view class="picker-line"></view>
			</view>
			<view>
				<view class="picker-rule">
					<view v-for="item of line4s" :key="item"
						:class="line4check.includes(item)?'picker-rule-item-active':'picker-rule-item'"
						@click="chose('line4',item)">{{item}}</view>
				</view>
				<view class="picker-line"></view>
			</view>
			<view>
				<view class="picker-rule">
					<view v-for="item of line5s" :key="item"
						:class="line5check.includes(item)?'picker-rule-item-active':'picker-rule-item'"
						@click="chose('line5',item)">{{item}}</view>
				</view>
				<view class="picker-line"></view>
			</view>
			<view>
				<view class="picker-rule">
					<view v-for="item of line8s" :key="item"
						:class="line8check.includes(item)?'picker-rule-item-active':'picker-rule-item'"
						@click="chose('line8',item)">{{item}}</view>
				</view>
				<view class="picker-line"></view>
			</view>
			<view>
				<view class="picker-rule">
					<view v-for="item of line6s" :key="item"
						:class="line6check.includes(item)?'picker-rule-item-active':'picker-rule-item'"
						@click="chose('line6',item)">{{item}}</view>
				</view>
				<view class="picker-line"></view>
			</view>
			<view>
				<view class="picker-rule">
					<view v-for="item of line7s" :key="item"
						:class="line7check.includes(item)?'picker-rule-item-active':'picker-rule-item'"
						@click="chose('line7',item)">{{item}}</view>
				</view>
				<view class="picker-line"></view>
			</view>
		</view>
		<view style="height: 3rem;">
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				deviceWidth: null,
				deviceWidth2: 0,
				stickyHeaderHeight: 0, // 用来存储 sticky-header 的高度
				copyText: '复制',
				line1lefts: ['单', '双'],
				line1rights: ['小', '大'],
				line2s: ['合单', '大单', '小单', '合大', '尾大', '合双', '大双', '小双', '合小', '尾小'],
				line3s: ['红波', '蓝波', '绿波'],
				line4s: ['红单', '红双', '蓝单', '蓝双', '绿单', '绿双'],
				line5s: ['鼠',
					'猪',
					'狗',
					'鸡',
					'猴',
					'牛',
					'羊',
					'马',
					'蛇',
					'龙',
					'兔',
					'虎'
				],
				line6s: ['0头', '1头', '2头', '3头', '4头'],
				line7s: ['0尾', '1尾', '2尾', '3尾', '4尾', '5尾', '6尾', '7尾', '8尾', '9尾'],
				line8s: ['金', '木', '水', '火', '土'],
				line1leftcheck: '',
				line1rightcheck: '',
				line2check: [],
				line3check: [],
				line4check: [],
				line5check: [],
				line6check: [],
				line7check: [],
				line8check: [],
			}
		},
		components: {},

		mounted() {
			this.getDeviceWidth()
			// this.getHeight();
		},
		watch: {
			line1leftcheck() {
				this.update()
			},
			line1rightcheck() {
				this.update()
			},
			line2check() {
				this.update()
			},
			line3check() {
				this.update()
			},
			line4check() {
				this.update()
			},
			line5check() {
				this.update()
			},
			line6check() {
				this.update()
			},
			line7check() {
				this.update()
			},
			line8check() {
				this.update()
			},
		},
		computed: {
			...mapState(['winningStyle', 'balls']),
			...mapGetters(['judgingStyle'])
		},
		methods: {
			chose(type, item) {
				if (this[type + 'check'].indexOf(item) != -1) {
					this[type + 'check'].splice(this[type + 'check'].indexOf(item), 1)
				} else {
					this[type + 'check'].push(item)
				}
				// this.getHeight()
			},
			copy() {
				let arr = this.balls.filter(i => i.show).map(n => n.opencode)
				this.copyText = '复制成功'
				this.$copyText(arr.join(',')).then(
					res => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				)
				// if (navigator.clipboard) {
				// 	navigator.clipboard.writeText(arr.join(','));
				// 	this.copyText = '复制成功'
				// 	setTimeout(() => {
				// 		this.copyText = '复制'
				// 	}, 2000)
				// } else {
				// 	uni.showToast({
				// 		title: "复制失败，当前浏览器不支持",
				// 		icon: "none",
				// 		duration: 2000
				// 	});
				// }
			},
			update() {
				let obj = {
					line1left: this.line1leftcheck ? [this.line1leftcheck] : this.line1lefts,
					line1right: this.line1rightcheck ? [this.line1rightcheck] : this.line1rights,
					line2: this.line2check.length != 0 ? this.line2check : this.line2s,
					line3: this.line3check.length != 0 ? this.line3check : this.line3s,
					line4: this.line4check.length != 0 ? this.line4check : this.line4s,
					line5: this.line5check.length != 0 ? this.line5check : this.line5s,
					line6: this.line6check.length != 0 ? this.line6check : this.line6s,
					line7: this.line7check.length != 0 ? this.line7check : this.line7s,
					line8: this.line8check.length != 0 ? this.line8check : this.line8s
				}
				let obj2 = {
					line1left: this.line1leftcheck ? [this.line1leftcheck] : [],
					line1right: this.line1rightcheck ? [this.line1rightcheck] : [],
					line2: this.line2check.length != 0 ? this.line2check : [],
					line3: this.line3check.length != 0 ? this.line3check : [],
					line4: this.line4check.length != 0 ? this.line4check : [],
					line5: this.line5check.length != 0 ? this.line5check : [],
					line6: this.line6check.length != 0 ? this.line6check : [],
					line7: this.line7check.length != 0 ? this.line7check : [],
					line8: this.line8check.length != 0 ? this.line8check : []
				}
				let allEmpty = true
				for (let n in obj2) {
					if (obj2[n].length != 0) {
						allEmpty = false
					}
				}
				if (allEmpty) {
					this.balls.forEach(i => {
						i.show = false
					})
					return
				}
				this.balls.forEach(i => {
					let show = true
					let line2Has = false
					for (let n in obj) {
						if (n != 'line2' && !obj[n].includes(i[n])) {
							show = false
						}
						line2Has = false
						obj.line2.forEach(x => {
							if (i.line2.find(y => y == x)) {
								line2Has = true
							}
						})
					}
					i.show = show && line2Has
				})
			},
			getDeviceWidth() {
				const systemInfo = uni.getSystemInfoSync();
				const screenWidth = systemInfo.screenWidth;

				// 判断是否为PC设备
				if (screenWidth >= 768) {
					this.deviceWidth = 350; // 如果是PC，使用默认宽度350px
					this.deviceWidth2 = 350
				} else {
					this.deviceWidth = null; // 如果是手机，使用实际屏幕宽度
					this.deviceWidth2 = screenWidth
				}
				console.log('------------------', this.deviceWidth2);
			},
			getHeight() {
				let a = 0
				let b = 0
				const query = uni.createSelectorQuery().in(this);
				query.select('.sticky-header').boundingClientRect(data => {
					if (data) {
						a = data.height;
					}
				}).exec();
				const querybox = uni.createSelectorQuery().in(this);
				querybox.select('.tabbox').boundingClientRect(data => {
					if (data) {
						b = data.height + 120;
					}
				}).exec();
				console.log(a + b);
				this.stickyHeaderHeight = a + b
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-mobile {
		height: 100%;
		box-sizing: border-box;
		margin: 0 auto;

		.picker-box {
			// padding: 10px;

			.picker-line {
				height: .453rem;
				box-sizing: border-box;
				border-bottom: .027rem solid #999;
			}

			.picker-rule {
				display: grid;
				grid-template-columns: repeat(6, 1fr);
				grid-gap: .32rem .32rem;
				padding-top: 10px;

				.picker-rule-item-active {
					color: #fff;
					border: .027rem solid #1a3d96;
					background-color: #1a3d96;
					font-size: 16px;
					// color: #333;
					border: .027rem solid #333;
					text-align: center;
					line-height: .373rem;
					padding: 5px 0;
					border-radius: .107rem;
				}

				.picker-rule-item {
					font-size: 16px;
					color: #333;
					border: .027rem solid #333;
					text-align: center;
					line-height: .373rem;
					padding: 5px 0;
					border-radius: .107rem;
				}
			}

			.picker-opt {
				display: flex;
				align-items: center;
				flex-direction: row-reverse;

				.picker-opt-copy {
					font-size: 15px;
					color: #1a3d96;
					border: .027rem solid #1a3d96;
					padding: .053rem 8px;
					margin-left: .213rem;
					border-radius: .107rem;
				}

				.picker-opt-clear {
					font-size: 15px;
					color: #1a3d96;
					border: .027rem solid #1a3d96;
					padding: .053rem 8px;
					margin-left: 10px;
					border-radius: .107rem;
				}
			}

			.picker-content {
				min-height: 154px;
				border: .027rem solid #1a3d96;
				box-sizing: border-box;
				padding: 8px;

				.picker-content-inner {
					display: grid;
					grid-template-columns: repeat(8, 1fr);
					grid-gap: 12px .213rem;

					.picker-item {
						width: 37.55px;
						height: 37.55px;
						font-size: 20px;
						text-align: center;
						color: #333;
						font-weight: 700;
						line-height: 37.55px;
					}
				}
			}
		}

		.navbar {
			height: 55px;
			background-color: #1a3d96;
			color: #fff;
			display: flex;
			align-items: center;
			overflow: hidden;
			box-sizing: border-box;
			padding: 0 8px;
			position: relative;

			.nav-left {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 17px;
			}

			.nav-center {
				width: 100%;
				font-size: 20px;
				// flex: 1;
				text-align: center;
				position: absolute;
				left: 0px;
			}

			// .nav-right {
			// 	height: 100%;
			// 	width: 20px;
			// }
		}
	}

	.sticky-header {
		background-color: #fff;
		color: white;
		padding: 10px 0;
		text-align: center;
		font-size: 24px;
		position: sticky;
		top: 0;
		z-index: 1000;
		/* 确保header在其他内容之上 */
	}
</style>